<template>
    <!-- <div> -->
        <el-tabs v-model.trim="activeName">
            <el-tab-pane name="chart" v-if="chartList.includes(option.type)">
                <div slot="label" style="font-size: 16px;">
                    <span v-if="option.type === 5">
                        <i class="el-icon-eleme"></i>
                        网页(web)
                    </span>
                    <span v-else>
                        <i class="el-icon-picture"></i>
                        图(Figures)
                    </span>
                </div>
                <chartInfo v-on="$listeners" v-bind="$attrs" />
            </el-tab-pane>

            <el-tab-pane name="table" v-if="tableList.includes(option.type)">
                <div slot="label" style="font-size: 16px;">
                    <i class="el-icon-s-data"></i>
                    <span>表(Tables)</span>
                </div>
                <tableInfo v-on="$listeners" v-bind="$attrs" />
            </el-tab-pane>
        </el-tabs>
    <!-- </div> -->
</template>

<script>
import tableInfo from './tableInfo'
import chartInfo from './chartInfo'
import { deepClone } from '@/utils';
export default {
    name: 'GenescloudUiList',
    components: {
        tableInfo, chartInfo
    },
    data() {
        return {
            activeName: 'chart',
            option: {},
            chartList: [2, 4, 5],
            tableList: [2, 3]
        };
    },
    watch: {
        '$attrs.option': {
            handler(val, newVal) {
                if (val) {
                    this.init(val)
                }
            },
            immediate: true,
            deep: true
        }
    },
    mounted() {
    },

    methods: {
        init(value) {
            this.option = deepClone(value)
            this.activeName = value.type == 3 ? 'table' : 'chart'
        }
    },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__content {
    display: flex;
    overflow-x: auto;
    flex-direction: column;
    min-height: calc(100vh - 130px);
    // background-color: red;
}

::v-deep .el-tabs__item {
    height: 50px;
    line-height: 50px;
}
</style>